<!--
 * @Author: Lzx
 * @LastEditors: Lzx
 * @Date: 2021-07-09 17:40:01
 * @LastEditTime: 2022-04-23 08:46:59
 * @FilePath: /web-vue/src/views/SysOwnCenter/components/EditUserInfo.vue
 * @Description: 编辑&提交用户基本信息组件
-->
<template>
  <div>
    <el-form
      :model="userForm"
      :rules="rules"
      status-icon
      ref="userForm"
      label-width="100px"
      style="width: 50%"
    >
      <el-form-item label="用户名：" size="mini" prop="username">
        <el-input v-model="userForm.username" readOnly></el-input>
      </el-form-item>
      <el-form-item label="姓名：" size="mini" prop="realName">
        <el-input
          v-model="userForm.realName"
          clearable
          :disabled="formDisabled.realName"
        ></el-input>
      </el-form-item>
      <el-form-item label="性别：" size="mini" prop="sex">
        <el-select
          v-model="userForm.sex"
          placeholder="请选择性别"
          clearable
          :disabled="formDisabled.sex"
        >
          <el-option label="男" value="1"></el-option>
          <el-option label="女" value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="手机号：" size="mini" prop="phone">
        <el-input
          v-model="userForm.phone"
          clearable
          :disabled="formDisabled.phone"
        ></el-input>
      </el-form-item>
      <el-form-item label="邮箱：" size="mini" prop="email">
        <el-input
          v-model="userForm.email"
          clearable
          :disabled="formDisabled.email"
        ></el-input>
      </el-form-item>
      <el-form-item label="头像：" prop="healthCodeUpload" size="mini">
        <el-image
          v-if="imageVisible"
          style="width: 100px; height: 100px; border-radius: 50%"
          :src="`${$store.state.API_ROOT}${userForm.avatar}`"
        >
        </el-image>
        <!-- 文件上传 -->
        <UploadImage
          v-if="!formDisabled.upload"
          ref="uploadImage"
          v-bind:dialogImageUrl="userForm.avatar"
          @afterUpload="afterUploadHandle"
        ></UploadImage>
      </el-form-item>
      <!-- TODO-lzx 临时增加的字段 -->
      <el-form-item label="收款码：" prop="duty" size="mini">
        <el-image
          v-if="userForm.duty"
          style="width: 100px; height: 100px;"
          :src="`${$store.state.API_ROOT}${userForm.duty}`"
        >
        </el-image>
        <!-- 文件上传 -->
        <UploadImage
          v-if="!formDisabled.upload"
          ref="uploadImage2"
          :dialogImageUrl="userForm.duty"
          @afterUpload="(val) => (userForm.duty = val)"
        ></UploadImage>
      </el-form-item>
      <el-form-item size="mini">
        <el-button
          type="success"
          icon="el-icon-finished"
          @click="submitBtn('userForm')"
          :disabled="formDisabled.submit"
          >保存
        </el-button>
        <el-button type="primary" icon="el-icon-edit" @click="editBtn()"
          >编辑
        </el-button>
        <!-- 插槽：其他按钮 -->
        <slot name="otherBtn"></slot>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import UploadImage from "@/components/Upload/uploadImage";

export default {
  name: "editUserInfo",

  components: {
    UploadImage,
  },

  data() {
    return {
      // 表单校验规则
      rules: {
        realName: [
          {
            required: true,
            message: "姓名不能为空！",
            trigger: "blur",
          },
        ],
      },
      // 用户基本信息表单
      userForm: {
        realName: "",
        phone: "",
        email: "",
        sex: "",
        avatar: "",
        duty: "",
      },
      userForm2: {
        dept: "",
      },
      // 表单元素初始化：不可用
      formDisabled: {
        realName: true,
        phone: true,
        email: true,
        sex: true,
        submit: true,
        upload: true,
      },
      // imgage 可视？
      imageVisible: false,
    };
  },

  methods: {
    // 提交
    submitBtn(formName) {
      // 数据提交
      this.submitFormApi(formName);
    },

    // 编辑
    editBtn() {
      // 通知父组件：数据编辑逻辑
      this.$emit("editLogic");
    },

    // 数据提交接口处理
    submitFormApi(formName) {
      this.$refs[formName].validate((valid) => {
        // 表单校验通过
        if (valid) {
          const loading = this.$loading({
            target: document.querySelector(".edit-user-dialog"),
            lock: true,
            text: "正在保存，请耐心等待！",
          });

          // 请求参数
          let param = Object.assign({}, this.userForm);
          this.$delete(param, "username");

          // 请求处理
          this.$api
            .modifyOwnInfo(param)
            .then((res) => {
              loading.close();

              let { status, message, data } = res.data; // 响应数据
              if (status == 200) {
                // 通知父组件：数据提交后置处理
                this.$emit("afterSubmit");
                // 清空上传文件列表
                this.$refs["uploadImage"].clearUploadedFileList();
                this.$refs["uploadImage2"].clearUploadedFileList();
              } else {
                this.$alert(`更新失败！${message}`, "更新结果", {
                  type: "error",
                  confirmButtonText: "确定",
                  callback: (action) => {},
                });
              }
            })
            .catch(function (err) {
              loading.close();
              console.log("【用户信息保存&更新】接口发生错误: " + err);
            });
        }
      });
    },

    // 清除表单校验
    clearFormValid() {
      this.$refs["userForm"].clearValidate();
    },

    // 图片上传后处理
    afterUploadHandle(val) {
      this.userForm.avatar = val;
    },
  },
};
</script>

<style lang="scss"></style>
